<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IP 查询服务 - 轻松查询IP地址信息</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <meta name="description" content="IP查询服务 - 快速查询IP地址的地理位置、运营商、网络信息等">
</head>
<body>
    <header>
        <h1>IP 查询服务</h1>
        <p>快速查询IP地址的地理位置、运营商和网络信息</p>
    </header>

    <div class="container">
        <div class="card">
            <h2><i class="fas fa-search"></i> 单IP查询</h2>
            <form action="/query" method="post">
                <label for="ip_address">输入 IP 地址：</label>
                <input type="text" id="ip_address" name="ip_address" placeholder="例如：8.8.8.8" required>
                <button type="submit"><i class="fas fa-search"></i> 查询 IP</button>
            </form>
        </div>

        <div class="divider"></div>

        <div class="card">
            <h2><i class="fas fa-list"></i> 批量 IP 查询</h2>
            <form action="/batch" method="post" enctype="multipart/form-data">
                <label for="ip_file">上传 IP 地址文件（每行一个IP）：</label>
                <input type="file" id="ip_file" name="ip_file" accept=".txt" required>
                <p class="file-hint">请上传文本文件，每行包含一个IP地址</p>
                <button type="submit"><i class="fas fa-upload"></i> 上传并查询</button>
            </form>
        </div>

        <footer>
            <p>IP查询服务 &copy; 2025 - 提供精准的IP地址信息查询</p>
        </footer>
    </div>

    <script>
        // 添加简单的表单验证
        document.querySelector('form').addEventListener('submit', function(e) {
            const ipInput = document.getElementById('ip_address');
            if (ipInput && ipInput.value) {
                const ipPattern = /^(\d{1,3}\.){3}\d{1,3}$/;
                if (!ipPattern.test(ipInput.value)) {
                    alert('请输入有效的IP地址格式，如: 192.168.1.1');
                    e.preventDefault();
                }
            }
        });
    </script>
</body>
</html>
